<!--  -->
<template>
  <div>
    <div class="mydiv"></div>
    <button @click="helloclick()">hello</button>
  </div>
</template>

<script>
export default {
  name: "AnimejsTest",
  data() {
    return {
      isAnime: false,
    };
  },

  components: {},

  computed: {},

  methods: {
    helloclick() {
      console.log("click");
      if (!this.isAnime) {
        this.isAnime = true;
        this.$anime({
          targets: ".mydiv",
          translateX: 250,
          translateY: 250,
          scale: 0,
          rotate: "1turn",
        });
      } else {
        this.isAnime = false;
        this.$anime({
          targets: ".mydiv",
          translateX: 0,
          translateY: 0,
          scale: 1,
          rotate: "1turn",
        });
      }
    },
  },
};
</script>
<style lang="scss"  scoped>
@import "@/assets/scss/theme.scss";
.mydiv {
  width: 100px;
  height: 100px;
  line-height: 100px;
  background-color: $body-background-color;
  color: $article-title-color;
}
</style>